<template>
  <div id="app">
    <el-row style="width: 100%" :gutter="20">
      <el-col :span="6">
        <el-card class="box-card">
          <div class="width_96 margin_top_10">
            <div class="width_100 padding_bottom_10 border_bottom top_tetx">
              <el-row style="width: 100%">
                <el-col :span="14"
                  ><div class="top_item_tetx">
                    <img
                      style="width: 30px; height: 30px; margin-right: 10px"
                      src="../../../assets/images/myAgent/gongsi.png"
                      alt=""
                    />
                    <span>汉汇科技有限公司</span>
                  </div></el-col
                >
                <el-col :span="10">
                  <div>
                    <el-button type="primary" class="button" @click="add()"
                      >新增</el-button
                    >
                    <el-button
                      type="primary"
                      class="button_item"
                      @click="add(1)"
                      >编辑</el-button
                    >
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="listTree">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item v-for="item in listTree" :key="item.id">
                  <span
                    style="font-size: 12px"
                    :class="item == classTree ? 'listTree_text' : ''"
                    >{{ item }}</span
                  >
                </el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <el-tree
              class="tree_list margin_top_10"
              :data="treeData"
              node-key="id"
              :expand-on-click-node="false"
              highlight-current
              @node-click="handleNodeClick"
            >
              <span class="custom-tree-node" slot-scope="{ node }">
                <div>
                  <img :src="icon_1" class="tree_icon" alt="" />
                  <span>{{ node.label }}</span>
                </div>
                <span class="el-dropdown-link"
                  ><i class="el-icon-arrow-right"></i
                ></span>
              </span>
            </el-tree>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card class="box-card">
          <div style="display: flex; align-content: center">
            <span class="link"></span> 用户组信息
          </div>
          <div class="user_group">
            <el-form disabled label-width="100px" ref="form" :model="form">
              <el-form-item label="组织名称：">
                <el-row>
                  <el-col :span="6">
                    <el-input
                      v-model="form.bank_card_holder"
                      placeholder="请输入账户户名"
                    ></el-input
                  ></el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="组织ID：">
                <el-row>
                  <el-col :span="6">
                    <el-input
                      v-model="form.bank_card_holder"
                      placeholder="请输入账户户名"
                    ></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="上级组织：">
                <el-row>
                  <el-col :span="6">
                    <el-input
                      v-model="form.bank_card_holder"
                      placeholder="请输入账户户名"
                    ></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="功能权限：" prop="withdrawals_bank">
                <el-row>
                  <el-col :span="6">
                    <el-cascader
                      style="width: 100%"
                      v-model="form.withdrawals_bank"
                      :options="options"
                      :props="{ multiple: true }"
                      collapse-tags
                      clearable
                    ></el-cascader>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="其他功能：" prop="withdrawals_bank">
                <el-switch disabled> </el-switch>
              </el-form-item>
              <el-form-item label="数据权限：" prop="bank_card_holder">
                <el-row>
                  <el-col :span="6">
                    <el-input
                      v-model="form.bank_card_holder"
                      placeholder="请输入账户户名"
                    ></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="组织架构：" prop="phone">
                <el-row>
                  <el-col :span="6">
                    <el-input
                      v-model="form.phone"
                      placeholder="预留手机号"
                    ></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="创建时间：" prop="phone">
                <el-row>
                  <el-col :span="6">
                    <el-input
                      v-model="form.phone"
                      placeholder="创建时间"
                    ></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="排序：" prop="phone">
                <el-row>
                  <el-col :span="6">
                    <el-input
                      v-model="form.phone"
                      placeholder="预留手机号"
                    ></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="分润比例：" prop="phone">
                <el-row>
                  <el-col :span="6">
                    <el-input-number
                      style="width: 100%"
                      v-model="form.num"
                      :min="1"
                      :max="10"
                      label="描述文字"
                    ></el-input-number>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
          </div>
          <div class="card_img">
            <img
              style="width: 376px; height: 290px"
              src="../../../assets/images/menu/zzjg.png"
              alt=""
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { get, post, pickerOptions } from "../../../util/request.js"
import { icon_1 } from "../../../util/icon.js"
export default {
  name: "",
  data () {
    let treeData = [
      {
        id: 1,
        label: "汉汇科技有限公司",
        children: [
          {
            id: 4,
            label: "二级 1-1",
            children: [
              {
                id: 9,
                label: "三级 1-1-1"
              },
              {
                id: 10,
                label: "三级 1-1-2"
              }
            ]
          }
        ]
      },
      {
        id: 2,
        label: "一级 2",
        children: [
          {
            id: 5,
            label: "二级 2-1"
          },
          {
            id: 6,
            label: "二级 2-2"
          }
        ]
      },
      {
        id: 3,
        label: "一级 3",
        children: [
          {
            id: 7,
            label: "二级 3-1"
          },
          {
            id: 8,
            label: "二级 3-2"
          }
        ]
      }
    ]

    return {
      icon_1: icon_1,
      listTree: ["汉汇科技有限公司"],
      treeData: JSON.parse(JSON.stringify(treeData)),
      filterText: "",
      time: "",
      form: {},
      sub_title: "",
      dialogVisible: false,
      classTree: "汉汇科技有限公司"
    }
  },
  mounted () {},
  methods: {
    handleNodeClick (val) {
      this.classTree = val.label
      if (this.listTree.length == 0) {
        this.listTree.push(val.label)
      } else {
        this.listTree = this.listTree.filter(item => item !== val.label)
        this.listTree.push(val.label)
        if (this.listTree.length > 3) {
          this.listTree.shift()
        }
      }
    },
    add (val) {
      if (val == 1) {
        this.$router.push({
          name: "addorgan",
          params: {
            type: "1",
            parameter: "编辑组织"
          }
        })
      } else {
        this.$router.push({
          name: "addorgan",
          params: {
            parameter: "新增组织"
          }
        })
      }
    },
    treeClickFn () {}
  }
}
</script>

<style scoped>
#app {
  background-color: #f1f4f9;
  display: flex;
  height: 95vh;
  overflow: auto !important;
}
.link {
  height: 20px;
  border-left: 2px solid #4575f7;
  display: inline-block;
  margin-right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
/deep/
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  color: #0067d9;
  /* font-weight: 700; */
}
.button_item {
  width: 40px;
  height: 30px;
  padding: 0 !important;
  line-height: 8px;
  color: #3f75ff;
  background: #fff;
  border-radius: 4px;
}
.tree_icon {
  width: 14px;
  height: 14px;
}
.listTree_text {
  color: #3f75ff;
}
.listTree {
  height: 30px;
}
.border_bottom {
  border-bottom: 0;
}
.top_item_tetx {
  font-size: 12px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #646464;
  display: flex;
  align-items: center;
}
.top_tetx {
  display: flex;
  justify-content: space-between;
}
.button {
  padding: 0 !important;
  width: 40px;
  height: 30px;
  line-height: 8px;
  color: #fff;
  background: #3f75ff;
  border-radius: 4px;
}
.box-card {
  position: relative;
  height: 90vh;
}
.card_img {
  width: 100%;
  margin: 20px;
  text-align: right;
}
.user_group {
  margin-top: 35px;
}

.title_text {
  font-size: 16px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #646464;
  margin: 30px;
}
.center {
  background-color: red;
}
.tree_list >>> .custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.el-tree .is-current > .el-tree-node__content {
  background-color: red;
  color: #409eff !important;
}

.tree_list >>> .el-tree-node__content:hover {
  background-color: #ddedff !important;
  color: #0067d9;
}

.list >>> .font_size_26 {
  font-size: 26px;
}

.list >>> .tab_title {
  font-size: 12px;
  color: #0067d9;
}

.list >>> .tab_title div {
  margin-right: 10px;
}

.small_box >>> .list {
  padding: 10px 0;
}
.small_box {
  margin-left: 20px;
}

.small_box >>> .box {
  padding: 10px;
  border-radius: 6px;
  background-color: rgba(236, 242, 254, 1);
}
</style>
